<template>
	<view>
		<!-- 搜索框 -->
		<view class="top_search">
			<view class="searchPhoto">
				<image class="searchP" src="/static/images/lunbo/search.png" widthFix></image>
				<input v-model="inputC" class="searchI" type="text" placeholder="请输入内容"/>
			</view>
			<button class="searchB" @click="search">搜索</button>
		</view>
		<!-- 展示部分 -->
		<view class="bottom_show">
			<view class="show_title">
				全部
			</view>
			<view class="show_content" v-for="item in Arr" :key="item.id">
				<view class="show_picture">
					<image class="showP" :src="item.img" widthFix></image>
				</view>
				<view class="show_detail">
					<view class="showT">
						{{item.name}}
					</view>
					<view class="label">
						<template v-for="itemo in item.labelArr" :key="itemo">
							<view class="label_item">{{itemo}}</view>
						</template>
					</view>
					<view class="show_num">
						{{item.num}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Arr:[],
				inputC:"",
				listArr:[
					{
						id:1,
						img:"/static/home/dizigui.jpeg",
						labelArr:['早教','2-5岁'],
						name:"弟子规",
						num:"共11课"
					},
					{
						id:2,
						img:"/static/home/daodejing.jpg",
						labelArr:['早教','2-4岁'],
						name:"道德经",
						num:"共9课"
					},
					{
						id:3,
						img:"/static/home/sanzijing.jpeg",
						labelArr:['早教','2-4岁'],
						name:"三字经",
						num:"共12课"
					},
					{
						id:4,
						img:"/static/home/lunyu.jpeg",
						labelArr:['早教','2-4岁'],
						name:"论语",
						num:"共9课"
					},
					{
						id:5,
						img:"/static/home/PeppaPig.jpeg",
						labelArr:['绘本','2-4岁'],
						name:"小猪佩奇",
						num:"共9课"
					},
					{
						id:6,
						img:"/static/home/xiongchumo.jpeg",
						labelArr:['绘本','2-4岁'],
						name:"熊出没",
						num:"共15课"
					},
					{
						id:7,
						img:"/static/home/xiyangyang.jpeg",
						labelArr:['绘本','2-4岁'],
						name:"喜羊羊与灰太狼",
						num:"共11课"
					},
					{
						id:8,
						img:"/static/home/labixiaoxin.jpeg",
						labelArr:['绘本','2-4岁'],
						name:"蜡笔小新",
						num:"共11课"
					},
					{
						id:9,
						img:"/static/home/duolaaimeng.jpeg",
						labelArr:['卡通','2-4岁'],
						name:"哆啦A梦",
						num:"共11课"
					},
					{
						id:10,
						img:"/static/home/tiaotiaohu.jpeg",
						labelArr:['卡通','2-4岁'],
						name:"跳跳虎",
						num:"共9课"
					},
					{
						id:11,
						img:"/static/home/haimianbaby.jpeg",
						labelArr:['卡通','2-4岁'],
						name:"海绵宝宝",
						num:"共11课"
					},
					{
						id:12,
						img:"/static/home/TomJerry.jpeg",
						labelArr:['卡通','2-4岁'],
						name:"猫和老鼠",
						num:"共11课"
					},
					{
						id:13,
						img:"/static/home/huochaichild.jpeg",
						labelArr:['儿童','2-4岁'],
						name:"卖火柴的小女孩",
						num:"共11课"
					},
					{
						id:14,
						img:"/static/home/guiturun.jpeg",
						labelArr:['儿童','2-4岁'],
						name:"龟兔赛跑",
						num:"共4课"
					},
					{
						id:15,
						img:"/static/home/bluejingling.jpeg",
						labelArr:['儿童','2-4岁'],
						name:"蓝精灵",
						num:"共10课"
					},
					{
						id:16,
						img:"/static/home/seven.jpeg",
						labelArr:['儿童','2-4岁'],
						name:"白雪公主与七个小矮人",
						num:"共11课"
					},
				]
			}
		},
		methods: {
			search(){
				if(this.inputC){
					this.Arr=this.listArr.filter(value=>value.name.indexOf(this.inputC)!=-1);
				}else{
					this.Arr=this.listArr
				}
				
				
			}
		},
		onLoad(){
			this.Arr=this.listArr
		}
	}
</script>

<style scoped>
	.top_search{
		width: 95%;
		margin: 0 auto;
		display: flex;
		align-items: center
	}
	.searchPhoto{
		display: flex;
		align-items: center
	}
	.searchP{
		height: 40px;
		width: 40px;
	}
	.searchI{
		border: 1px solid #515151;
		border-radius: 10px;
		height: 30px;
		width: 200px;
	}
	.searchB{
		width: 70px;
		height: 34px;
		line-height: 34px;
		background-color: black;
		color: white;
	}
	.bottom_show{
		width: 95%;
		margin: 0 auto;
		margin-top: 10px;
		text-align: center;
	}
	.show_title{
		font-size: 18px;
	}
	.show_content{
		border-top: 1px solid #515151;
		margin-top: 10px;
		display: flex;
	}
	.show_detail{
		margin: 10px 0 0 10px;
		height: 100px;
		display: inline;
		justify-content: space-between;
	}
	.show_picture{
		width: 150px;
		height: 100px;
		margin-top: 10px;
	}
	.showP{
		height: 100%;
		width: 100%;
	}
	.showT{
		font-size: 18px;
	}
	.label_item{
		display: inline-block;
		padding: 5px 20px;
		margin: 5px;
		border-radius: 5px;
		/* background-color: black; */
		border: 1px solid black;
		/* color: white; */
		color: black;
	}
</style>
